<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .liuyanList {
            margin: 30px 250px;
            border-collapse: collapse;
            border-radius: 10px;
            box-shadow: 0 0 0 2px cornflowerblue;
            text-align: center;
            overflow: hidden;
        }

        .liuyanList th,td{
            padding: 6px 10px;
            border: 1px solid cornflowerblue;
            border-collapse: collapse;
        }

        .liuyanList a {
            text-decoration: none;
            color: cornflowerblue;
            font-weight: bold;
        }

        .liuyanList a:active {
            opacity: 70%;
        }
    </style>
</head>
<body>
<h2 th:if="${liuyans.size() == 0}">留言列表为空</h2>
<table th:if="${liuyans.size() > 0}" class="liuyanList"  border="1">
    <tr>
        <th>留言编号</th>
        <th>留言用户姓名</th>
        <th>留言日期</th>
        <th>留言标题</th>
        <th>留言内容</th>
        <th>&nbsp;&nbsp;</th>
        <th>&nbsp;&nbsp;</th>
    </tr>
    <tr th:each="liuyan : ${liuyans}">
        <td th:text="${liuyan.id}"></td>
        <td th:text="${liuyan.userId}"></td>
        <td th:text="${liuyan.lydate}"></td>
        <td th:text="${liuyan.title}"></td>
        <td th:text="${liuyan.details}"></td>
        <td><a th:href="@{'/liuyan/update/' + ${liuyan.id}}" target="right">修改</a></td>
        <td><a href="#" th:attr="data-liuyanid=${liuyan.id}"
               th:onclick="confirmDelete(this.getAttribute('data-liuyanid'))">
            删除
        </a></td>
    </tr>
</table>
<script th:inline="javascript">
    function confirmDelete(liuyanid) {
        var result = confirm("Are you sure you want to delete this liuyan?")
        if (result) {
            window.location.href = '/liuyan/delete/' + liuyanid;
        } else {

        }
    }
</script>
</body>
</html>